<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Remote-stat Control System</title>

		<link type="text/css" href="css/custom_theme/jquery_custom.css" rel="stylesheet" />	
		<link type="text/css" href="css/clockpick.css" rel="stylesheet"	/>
		
		<script type="text/javascript" src="js/jquery_min.js"></script>
		<script type="text/javascript" src="js/jquery_clockpick.js"></script>
		<script type="text/javascript" src="js/jquery_ui_min.js"></script>
		<script type="text/javascript" src="js/jquery_tinysort.js"></script>
		<script type="text/javascript" src="js/jquery_livequery.js"></script>
		<script type="text/javascript" src="js/jquery_blockUI.js"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		
		<link type="text/css" href="css/site_css.css" rel="stylesheet" />
		<script type="text/javascript" src="js/site_js.js"></script>
		<script type="text/javascript" src="js/ajax.js"></script>
</head>

<body>
	<!-- Top banner and the logo -->
	<div id="headerContainer">		
	</div>
	<!-- End headerContainer -->
	
	<!-- Status container -->
	<div id="statusContainer">
		<table style="margin-left: auto; margin-right: auto;">
			<tr>
				<td>
    				<span class="curStatusContent">Current System Status</span><br>
				    <span id="curTemp" style="padding-left:40px"></span> <span class="units"></span> <span id="curOpMode"></span>
				</td>
				<td>
				    <span class="curStatusContent">Set Temperature</span><br>
				    <span id="curSetTemp" style="padding-left:40px"></span> <span class="units"></span>
				</td>
				<td>
				    <span class="curStatusContent">Operation Mode</span><br>
				    <span id="opMode" style="padding-left:40px"></span>
				</td>
				<td>
				    <span class="curStatusContent">Fan Mode</span><br>
				    <span id="setFanMode" style="padding-left:40px"></span>
				</td>
				<td>
				    <span class="curStatusContent">HVAC Mode</span><br>
				    <span id="setHVACMode" style="padding-left:40px"></span>
				</td>
			</tr>
		</table>
	</div>	
	<!-- End statusContainer -->
	
	<!-- Left-hand side links -->
	<div id="linkContainer">
		<div id="accordion">
			<div>
				<h3><a href="#">Temperature</a></h3>
				<div>
					<a class="link" id="schedule" href="#">Schedule Control</a>
					<br>
					<a class="link" id="manual" href="#">Manual Control</a>
				</div>
			</div>
			<div>
				<h3><a href="#">Data</a></h3>
				<div>
					<a class="link" id="historical" href="#">Historical Data</a>
				</div>
			</div>
			<div>
				<h3><a href="#">Thermostat Settings</a></h3>
				<div>
					<a class="link" id="thermostatSettings" href="#">General Settings</a>
					<br>
					<a class="link" id="networkSettings" href="#">Network Settings</a>
					<br>
					<a class="link" id="timeSettings" href="#">Time Settings</a>
				</div>
			</div>
		</div>
	</div>
	<!-- End linkContainer -->
	
	<!-- Overall container for all of the GUI's main content (the pages themselves) -->
	<div class="contentContainer">
		
		<!-- 
		"Default Content" class loads first on the page (display property is not set to "none").
		
		This page contains the schedule itself. 
		-->		
		<div class="defaultContent" id="scheduleContent" style="overflow:visible;">
			<div>
				<div style="float:left;">
					<h2>Schedule Control</h2>
				</div>	
				<div id="curTimeInfo" style="float: right; font-weight: bold; position: relative; right: 36px;">
				</div>
			</div>
			
			<br><br>
		
			<!-- Schedule Content-->
			<div class="contentPadding" style="height:420px; clear:both;">						
					<!-- Sunday Schedule -->
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px;" id="sunSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Sunday</b>
							</p>
							<ul id="sunScheduleList" style="list-style-type:none;">
							</ul>
						</div>
						<div style="height:30px">
							<button id="addPointSun" class="ui-button ui-state-default ui-corner-all schedButton" style="top:15px;">Add Set Point</button>
						</div>
					</div>

					<!-- Monday Schedule -->
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px;" id="monSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Monday</b>
							</p>
							<ul id="monScheduleList" style="list-style-type:none;"></ul>
						</div>
						<div style="height:30px">
							<button id="addPointMon" class="ui-button ui-state-default ui-corner-all schedButton">Add Set Point</button>
						</div>
					</div>

					<!-- Tuesday Schedule -->
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px;" id="tuesSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Tuesday</b>
							</p>
							<ul id="tuesScheduleList" style="list-style-type:none;"></ul>
						</div>
						<div style="height:30px">
							<button id="addPointTues" class="ui-button ui-state-default ui-corner-all schedButton">Add Set Point</button>
						</div>
					</div>	

					<!-- Wednesday Schedule -->												
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px;" id="wedSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Wednesday</b>
							</p>
							<ul id="wedScheduleList" style="list-style-type:none;">
							</ul>
						</div>
						<div height="30px">
							<button id="addPointWed" class="ui-button ui-state-default ui-corner-all schedButton">Add Set Point</button>
						</div>
					</div>
																	
					<!-- Thursday Schedule -->
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px;" id="thursSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Thursday</b>
							</p>
							<ul id="thursScheduleList" style="list-style-type:none;"></ul>
						</div>
						<div style="height:30px">
							<button id="addPointThurs" class="ui-button ui-state-default ui-corner-all schedButton">Add Set Point</button>
						</div>
					</div>

					<!-- Friday Schedule -->							
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px; overflow:visible;" id="friSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Friday</b>
							</p>
							<ul id="friScheduleList" style="list-style-type:none;"></ul>
						</div>
						<div style="height:30px">
							<button id="addPointFri" class="ui-button ui-state-default ui-corner-all schedButton">Add Set Point</button>
						</div>
					</div>		
					
					<!-- Saturday Schedule -->
					<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="float:left; width:24%; height:200px;" id="satSchedule">
						<div style="height:150px">
							<p style="text-align:center">
								<b>Saturday</b>
							</p>
							<ul id="satScheduleList" style="list-style-type:none;"></ul>
						</div>
						<div style="height:30px">
							<button id="addPointSat" class="ui-button ui-state-default ui-corner-all schedButton">Add Set Point</button>
						</div>
					</div>
					
					<!-- Save and apply schedule -->
					<div style="clear:both;">
						<br>
						<button id="saveSchedule" class="ui-button ui-state-default ui-corner-all"> Save Schedule</button>
						<button id="applySchedule" class="ui-button ui-state-default ui-corner-all">Apply Schedule</button>	
					</div>
				</div>	
		</div>
		<!-- End scheduleContainer -->
		
		<!-- 
		From here through the rest of the document, each section is given a "Content" class (all of which need
		to set their display property from the default value of "none" when their corresponding link is clicked).
		All pages except for the page that initially loads up is a "content" class.
		-->
				
		<!-- Allows the user to modify the current thermostat settings immediately -->
		<div class="content" id="manualTempChange">
			<div class="setTempContent">
				<h2>Manual Control</h2>	
				
				<br>
				
				<div class="contentPadding">
					<form name="manual_change">
						<label for="manual_amount">Set Temperature To</label>
						<br>
						<input type="text" size="3" name="manualDesiredTemp" id="manual_amount" value="" class="text ui-widget-content ui-corner-all" readonly style="font-weight:bold;"/>
					</form>
				</div>
				
				<br>
				
				<!-- The slider for setting the temperature value -->
				<div class="contentPadding">
					<div id="manual_slider" style="width:200px"></div>
					<img src="images/temperature.png" width="200" height="20">
				</div>
				
				<br>
				
				<!-- Make the change -->
				<div class="contentPadding">
					<button id="manualChangeButton" class="ui-button ui-state-default ui-corner-all">Change Now</button>
				</div>
			</div>
		</div>
		<!-- End manualTemperatureChange section -->
		
		<!-- This section contains data captured from the thermostat system.
		This may or may not end up in the final product
		-->
		<div class="content" id="historicalContent">
			<h2>Historical Data</h2>
			<br>
			<div class="contentPadding">
				<b>Heater Runtime</b>
				<div class="contentPadding">
					<input type="text" readonly id="heatRuntimeHr" size="3" class="text ui-widget-content ui-corner-all" style="font-weight:bold; text-align:right;"/>
					&nbsp;Hours<br>
					<input type="text" readonly id="heatRuntimeMin" size="3" class="text ui-widget-content ui-corner-all" style="font-weight:bold; text-align:right;"/>
					&nbsp;Minutes
				</div>				
				
				<br>
				
				<b>Air Conditioner Runtime</b>
				<div class="contentPadding">
					<input type="text" readonly id="acRuntimeHr" size="3" class="text ui-widget-content ui-corner-all" style="font-weight:bold; text-align:right;"/>
					&nbsp;Hours<br>
					<input type="text" readonly id="acRuntimeMin" size="3" class="text ui-widget-content ui-corner-all" style="font-weight:bold; text-align:right;"/>
					&nbsp;Minutes
				</div>
				
				<br>
				
				<b>Fan Runtime</b>
				<div class="contentPadding">
					<input type="text" readonly id="fanRuntimeHr" size="3" class="text ui-widget-content ui-corner-all" style="font-weight:bold; text-align:right;"/>
					&nbsp;Hours<br>
					<input type="text" readonly id="fanRuntimeMin" size="3" class="text ui-widget-content ui-corner-all" style="font-weight:bold; text-align:right;"/>
					&nbsp;Minutes
				</div>
			</div>
			<br>
			<div class="contentPadding">
				<button id="clearHistory" class="ui-button ui-state-default ui-corner-all">Clear History</button>
			</div>
		</div>
		<!-- End historicalContent -->
		
		<!-- General Settings for the thermostat -->
		<div class="content" id="thermostatSettingsContent">
			<h2>General Settings</h2>
			<br>
			<div style="float:left; width: 49%;">
				<!-- Select the unit you want to have running (if any) -->			
				<div class="contentPadding">
					<b>HVAC System Selector</b>
					<form name="HVACModeForm">
						<input type="radio" name="setHVACMode" value="Cool">&nbsp;Cool<br>
						<input type="radio" name="setHVACMode" value="Heat">&nbsp;Heat<br>
						<input type="radio" name="setHVACMode" value="Off">&nbsp;Off
					</form>
				</div>
				
				<br>

				<!-- Set to either a gas or electric heater -->
				<div class="contentPadding">
					<b>Type of Heater</b>
						<form name="myHeaterTypeForm">
							<input type="radio" name="myHeaterType" value="Gas">&nbsp;Gas<br>
							<input type="radio" name="myHeaterType" value="Electric">&nbsp;Electric
						</form>
				</div>
				
				<br>
								
				<!-- Set the fan's mode to either Auto or On -->
				<div class="contentPadding">
					<b>Fan Mode</b>
						<form name="fanModeForm">
							<input type="radio" name="setFanMode" value="Auto">&nbsp;Auto<br>
							<input type="radio" name="setFanMode" value="On">&nbsp;On
						</form>
				</div>
				
				<br>
				
				<!-- Set the system's mode to either Schedule or Manual -->
				<div class="contentPadding">
					<b>Operation Mode</b>
						<form name="opModeForm">
							<input type="radio" name="opMode" value="Schedule">&nbsp;Schedule<br>
							<input type="radio" name="opMode" value="Manual">&nbsp;Manual
						</form>
				</div>
			</div>
			<div style="float:left; width: 49%">
				<!-- Setting the temperature tolerance value -->
				<div class="contentPadding">
					<form name="tempVarianceForm">
						<label for="var_amount"><b>Temperature Variance (in &deg;F)</b></label>
						<br>
						<input readonly type="text" size="3" class="text ui-widget-content ui-corner-all" name="desiredVar" id="var_amount" style="font-weight:bold;">
					</form>
				</div>
				
				<br>
				
				<!-- The slider for setting the tolerance value -->
				<div class="contentPadding">
					<div id="var_slider" style="width:150px"></div>
					(Less)&nbsp;-&nbsp;-&nbsp;-&nbsp;-&nbsp;-&nbsp;-&nbsp;-&nbsp;(More)
				</div>
				
				<br>
				
				<!-- Setting the temperature polling interval value -->
				<div class="contentPadding">
					<form name="pollIntervalForm">
						<label for="poll_amount"><b>Thermostat Polling Interval (in seconds)</b></label>
						<br>
						<input readonly type="text" class="text ui-widget-content ui-corner-all" size="3" name="desiredPollInt" id="poll_amount" style="font-weight:bold;">
					</form>
				</div>
				
				<br>
				
				<!-- The slider for setting the tolerance value -->
				<div class="contentPadding">
					<div id="poll_slider" style="width:150px"></div>
				</div>
				
				<br>

				<!-- Setting the temperature polling interval value -->
				<div class="contentPadding">
					<b>Temperature Offset (in &deg;F)</b>
					<br>
					<input type="text" class="text ui-widget-content ui-corner-all" size="3" value = "0" id="tempOffset" style="font-weight:bold;">	
				</div>
				
				<br>	
				<!-- Select the units to be displayed on the thermostat -->
<!--
				<div class="contentPadding">
					<b>Temperature Units</b>
					<form name="tempUnitForm">
						<input type="radio" name="tempUnit" value="F">&nbsp;Fahrenheit<br>
						<input type="radio" name="tempUnit" value="C">&nbsp;Celsius
					</form>
				</div>
-->			
				<!-- Save the general thermostat settings -->
				<div class="contentPadding">
					<br><br>
					<button id = "saveThermostatSettings" class="ui-button ui-state-default ui-corner-all">Save Settings</button>
				</div>	
			</div>	
		</div>
		<!-- End thermostatSettingsContent -->

		<div class="content" id="networkSettingsContent">
			<h2>Network Settings</h2>
			<br>			

			<div style="float:left; width: 49%;">
				<div class="contentPadding" id="macAddress">
					<b>MAC Address</b>
					<br>
					<input type="text" id="macAddr1" readonly size="1" maxlength="2" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;:
					<input type="text" id="macAddr2" readonly size="1" maxlength="2" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;:
					<input type="text" id="macAddr3" readonly size="1" maxlength="2" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;:
					<input type="text" id="macAddr4" readonly size="1" maxlength="2" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;:
					<input type="text" id="macAddr5" readonly size="1" maxlength="2" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;:
					<input type="text" id="macAddr6" readonly size="1" maxlength="2" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>
				
				<br>
				
				<div class="contentPadding" id="ipAddress">
					<b>IP Address</b>
					<br>
					<input type="text" id="ipAddr1" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="ipAddr2" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="ipAddr3" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="ipAddr4" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>
				
				<br>
				
				<div class="contentPadding" id="subnetMask">
					<b>Subnet Mask</b>
					<br>
					<input type="text" id="inetMask1" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="inetMask2" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="inetMask3" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="inetMask4" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>
				
				<br>
				
				<div class="contentPadding" id="defaultGateway">
					<b>Default Gateway</b>
					<br>
					<input type="text" id="gatewayAddr1" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="gatewayAddr2" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="gatewayAddr3" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="gatewayAddr4" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>

				<br>
				
				<div class="contentPadding" id="DNSServer">
					<b>DNS Server</b>
					<br>
					<input type="text" id="DNSAddr1" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="DNSAddr2" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="DNSAddr3" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">&nbsp;.
					<input type="text" id="DNSAddr4" size="2" maxlength="3" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>

			</div>
			
			<div style="float:left; width: 49%;">
				<div class="contentPadding">
					<b>Access Point SSID</b>
					<br>
					<input type="text" id="ssid" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>
				
				<br>
				
				<div class="contentPadding">
					<b>WEP Key</b>
					<br>
					<input id="wepKey" style="font-weight:bold;" class="text ui-widget-content ui-corner-all">
				</div>
				
				<br>
				
				<div class="contentPadding">
					<b>Is DHCP Enabled?</b>
					<br>
					<form name="DHCPForm">
						<input type="radio" name="dhcpEnabled" value="Yes">&nbsp;Yes<br>
						<input type="radio" name="dhcpEnabled" value="No">&nbsp;No
					</form>
				</div>
			
				<!-- Save Network settings button -->
				<div class="contentPadding">
					<br><br>
					<button id = "saveNetworkSettings" class="ui-button ui-state-default ui-corner-all">Save Settings</button>
				</div>
			</div>
		</div>
		<!-- End of NetworkSettings -->

		<!-- Settings related to the time recognized by the thermostat -->
		<div class="content" id="timeSettingsContent">
			<!-- Determines whether the rest of the fields show up or not -->
			<div class="contentPadding">
				<input type="checkbox" id="autoTimeSync" checked="true">Automatically synchronize with an Internet Time Server</input>
			</div>
			
			<br>
			
			<div id="timeSettingsFields" class="contentPadding">
				<div class="contentPadding">
					<b>Time Zone</b>
					<br>
					<form name="timeZoneSelector">
						<select id="timeZone" name="timeZone" class="ui-widget-content ui-corner-all">
						  	<option value="central">Central</option>					  	
							<option value="pacific">Pacific</option>
						  	<option value="mountain">Mountain</option>
							<option value="eastern">Eastern</option>
						</select>
						<input type="checkbox" id="useDaylightSavings">Recognize Daylight Savings Time
					</form>
				</div>
				
				<br>
				
				<div class="contentPadding">
					<b>Time Server</b>
					<br>
					<input type="checkbox" checked="true" id="useDefaultTimeServer">Use Default&nbsp;&nbsp;</input>
					<input type="text" id="timeServerField" class="text ui-widget-content ui-corner-all" style="font-weight:bold;"/>
				</div>
			</div>
			
			<br>
			
			<div class="contentPadding">
				<div class="contentPadding">
					<button id="saveTimeSettings" class="ui-button ui-state-default ui-corner-all">Save Settings</button>
				</div>
			</div>
		</div>
		<!-- End of TimeZone settings content -->
	</div>
	<!-- End contentContainer -->

	<!-- Various Dialog Boxes -->
	
	<!-- The temperature setting dialog box -->
	<div id="setPointDialog" title="Add New Set Point">
			<form name="temperature">
				<label for="amount">Set Temperature To</label>
				<br>
				<input type="text" size = "3" name="desiredTemp" id="amount" value="" class="text ui-widget-content ui-corner-all" readonly style="font-weight:bold;"/>
			</form>
			
			<br>
		
			<!-- The slider for setting the temperature value -->
			<div id="slider" style="width:200px"></div>
			<img src="images/temperature.png" width="200" height="20">
		
			<br>

			<!-- The time selector -->						
			<form name="timeSelector">
				<label for="time">Starting at</label>
			 	<br>
				<input type="text" name="time" id="time" value="" class="text ui-widget-content ui-corner-all" readonly style="font-weight:bold;"/>
				<img id="clockPick" src="images/clock.png" height="25" width="25"/>
			</form>	
			
			<br>
			
			<label>In addition to the currently selected day,<br>apply this setting to</label>
			<br>
			<form name="daysSelector">
				<select name="applicableDays" class="ui-widget-content ui-corner-all">
				  	<option value="oneDay">Only Today</option>
				  	<option value="weekDays">Weekdays</option>
				  	<option value="weekEnd">Weekend</option>
					<option value="allDays">All Days</option>
				</select>
			</form>
	</div>	

	<!-- Maximum number of temperature settings reached dialog -->
	<div id="maxSettingsDialog" title="Maximum Set Points Reached">
		<p>
			The maximum number of thermostat settings per day is 4. 
		</p>
		<p>
			The currently selected day has exceeded this limit.
		</p>
	</div>
	
	<!-- Maximum number of temperature settings reached dialog -->
	<div id="maxSettingsDialogMultiple" title="Maximum Set Points Reached">
		<p>
			The maximum number of thermostat settings per day is 4. 
		</p>
		<p>
			One or more of the selected days has exceeded this limit, but your settings have
			been applied to all days with less than 4 thermostat settings in their schedule.
		</p>
	</div>
	
	<!-- Invalid time dialog -->	
	<div id="invalidTimeDialog" title="Must Enter Valid Time">
		<p>
			You must enter a valid time for this thermostat setting.
		</p>
	</div>
	
	<!-- There is already a thermostat setting for this time -->	
	<div id="timeExistsDialog" title="Setting Exists For This Time!">
		<p>
			A thermostat setting for this time already exists on one or more
			of the days you have selected.
		</p>
		<p>
			You must remove the thermostat setting for this time on the conflicting
			day(s) if you wish to apply a new setting to those days.
		</p>
	</div>		

	<!-- Invalid temperature dialog -->	
	<div id="invalidTempDialog" title="Must Enter Valid Temperature">
		<p>
			You must enter a valid temperature for this thermostat setting.
		</p>
	</div>

	<!-- Manual mode alert dialog -->
	<div id="manualModeDialog" title="Schedule Will Be Overridden!">
		<p>
			This will automatically override any Schedule settings currently in place.
		</p>
		<p>
			Are you sure you would like to switch modes?
		</p>
	</div>
	
	<!-- Second Manual mode dialog (information on how to set it back to schedule mode) -->
	<div id="manualModeDialog2" title="To Revert To Schedule Mode">
		<p>
			To set the control back to <b>Schedule Mode</b>, select the <b>Schedule Mode</b> option
			on the <b>Thermostat Settings</b> -> <b>General Settings</b> page.
		</p>
	</div>	
		
	<!-- Switching to schedule mode dialog -->
	<div id="switchingToScheduleDialog" title="Manual Mode Will Be Overridden!">
		<p>
			This will automatically override any Manual setting currently in place.
		</p>
		<p>
			Are you sure you would like to switch modes?
		</p>
	</div>
	
	<!-- Second switching to schedule dialog (information on how to set it back to schedule mode) -->
	<div id="switchingToScheduleDialog2" title="To Revert To Manual Mode">
		<p>
			To set the control back to <b>Manual Mode</b>, select the <b>Manual Mode</b> option
			on the <b>Thermostat Settings</b> -> <b>General Settings</b> page.
		</p>
	</div>

	<!-- Dialog to inform the user they have not filled out all of the required fields to save the settings -->
	<div id="settingsIncomplete" title="Incomplete Settings">
		<p>
			You must enter a value for each of the settings above to save the settings.
		</p>
	</div>	
	
	<!-- Dialog to inform the user they must select a DHCP option -->
	<div id="invalidDHCP" title="Invalid DHCP Selection">
		<p>
			You must select an option for the DHCP setting for your network to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid MAC Address-->
	<div id="invalidMAC" title="Invalid MAC Address">
		<p>
			You must enter a valid MAC Address to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid IP Address -->
	<div id="invalidIP" title="Invalid IP Address">
		<p>
			You must enter a valid IP Address to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid Subnet Mask -->
	<div id="invalidSubnet" title="Invalid Subnet Mask">
		<p>
			You must enter a valid Subnet Mask to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid Gateway Address -->
	<div id="invalidGateway" title="Invalid Gateway Address">
		<p>
			You must enter a valid Gateway Address to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid DNS Server Address -->
	<div id="invalidDNS" title="Invalid DNS Server Address">
		<p>
			You must enter a valid DNS Server Address to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid SSID -->
	<div id="invalidSSID" title="Invalid SSID">
		<p>
			You must enter a valid SSID to save the settings.
		</p>
	</div>	

	<!-- Dialog to inform the user they have entered an invalid WEP Key -->
	<div id="invalidWEPKey" title="Invalid WEP Key">
		<p>
			You must enter a valid WEP Key (either exactly 10 or 26 characters, depending on the version of WEP being used)
			in order to save the settings.
		</p>
	</div>	
	
	<!-- Dialog to inform the user their settings could not be saved -->
	<div id="settingsNotLoaded" title="Settings Could Not Be Loaded">
		<p>
			Your settings were unable to be loaded at this time.
			This could be due to a number of factors, such as your Internet connection
			or hardware problems on the thermostat device.	
		</p>
		<p>
			Please try to load your settings again later.
		</p>
	</div>	
	
	<!-- Dialog to inform the user their settings have been saved -->
	<div id="settingsSaved" title="Settings Successfully Saved!">
		<p>
			Your settings have been successfully saved!	
		</p>
	</div>
	
	<!-- Dialog to inform the user their settings could not be saved -->
	<div id="settingsNotSaved" title="Settings Could Not Be Saved">
		<p>
			Your settings were unable to be saved at this time.
			This could be due to a number of factors, such as your Internet connection
			or hardware problems on the thermostat device.	
		</p>
		<p>
			Please try to save your settings again later.
		</p>
	</div>	
	
	<!-- Prompts the user to save their newly modified settings -->
	<div id="promptForSave" title="Save New Settings?">
		<p>
			It appears that you have made modifications to the thermostat settings.
			Would you like to save your new settings?
		</p>
	</div>	
		
</body>
</html>